<template>
  <div id="pdfRef">
    <div class="pdfRef">
      <div>
        <van-row gutter="20" class="tc tt br1">
          <van-col span="10">Name</van-col>
          <van-col span="6">Price（p）</van-col>
          <van-col span="8">Count</van-col>
        </van-row>
        <van-row class="tl tr" v-for="(item, index) in goods">
          <van-col span="10" class="br1 bt1 bl0"
            ><div class="tc fcc">{{ item.name }}</div></van-col
          >
          <van-col span="6" class="br1 bt1 bl0"
            ><div class="fcc">{{ item.price }} / {{ item.unit }}</div></van-col
          >
          <van-col span="8" class="br1 bt0 bl0 fcc"
            ><div class="fcc">{{ item.count }}</div></van-col
          >
          <div class="vfi" v-if="item.memo">{{ item.memo }}</div>
        </van-row>
        <div class="tb"></div>
      </div>
      <div v-if="goods.length > 0" style="padding-bottom: 10px">
        Total Prize：{{ totalPrize }}，Total Count：{{ totalCount }}
      </div>
      <div>
        <van-cell-group>
          <van-field
            v-model="name"
            label-width="100px"
            required
            label="Name"
            placeholder="Please input name"
          />
          <van-field
            v-model="phone"
            label-width="100px"
            required
            label="Phone"
            placeholder="Please input phone"
          />
          <van-field
            v-if="!isExport"
            v-model="address"
            label-width="100px"
            required
            label="Address"
            type="textarea"
            rows="3"
            placeholder="Please input address"
          />
          <div v-if="isExport" class="vdd van-cell van-field">
            <span class="van-field__label van-field__label--required"
              >Address</span
            ><span class="vddl">{{ address }}</span>
          </div>
          <van-field
            v-model="dtime"
            label-width="100px"
            label="Delivery time"
            :placeholder="isExport ? '' : 'Please input delivery time'"
          />
          <van-field
            v-model="paytype"
            label-width="100px"
            label="Payment type"
            :placeholder="isExport ? '' : 'Please input payment type'"
          />
          <van-field
            v-model="notes"
            label-width="100px"
            label="Notes"
            type="textarea"
            rows="3"
            :placeholder="isExport ? '' : 'Please input notes'"
          />
        </van-cell-group>
      </div>
    </div>
  </div>
  <div class="lp" v-if="isExport">
    <van-loading class="loa" type="spinner" />
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { showConfirmDialog } from "vant";
import { htmlPdf, getTimeString } from "../utils";
const router = useRouter();
const params = router.currentRoute.value.params;
const pureGoods = JSON.parse(params.pureGoods || "[]");
const info = JSON.parse(params.info || "{}");
const goods = ref(pureGoods);
const dtime = ref(info.dtime);
const paytype = ref(info.paytype);
const name = ref(info.name);
const phone = ref(info.phone);
const notes = ref(info.notes);
const address = ref(info.address);
const isExport = ref(false);

const totalPrize = computed(() => {
  return goods.value.reduce((p, it) => {
    return p + (it.count || 0) * (it.price || 0);
  }, 0);
});
const totalCount = computed(() => {
  return goods.value.reduce((p, it) => {
    return p + (it.count || 0);
  }, 0);
});
window.win_goods_back = null;
window.win_info_back = function () {
  router.replace({
    name: "pick",
    path: "/pick",
    params: {
      pureGoods: JSON.stringify(pureGoods),
      info: JSON.stringify({
        dtime: dtime.value,
        paytype: paytype.value,
        name: name.value,
        phone: phone.value,
        notes: notes.value,
        address: address.value,
      }),
    },
  });
};
window.win_info_submit = function () {
  if (!name.value || !phone.value || !address.value) {
    return showToast("请填写Name、Phone、Address完整");
  }
  var fileName = getTimeString(`${name.value}${phone.value}`);
  const fileList = document.getElementsByClassName("pdfRef"); // 很重要
  isExport.value = true;
  setTimeout(() => {
    htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, () => {
      isExport.value = false;
      showConfirmDialog({
        title: "提示",
        message: "导出完成，是否返回选购页面",
      }).then(() => {
        router.replace({ name: "pick", path: "/" });
      });
    });
  }, 10);
};
</script>
<style scoped>
.bt1 {
  border-left: 1px solid #ccc;
}
.bl0 {
  border-left: 0;
}
.tb {
  padding-bottom: 0;
}
.vdd {
  display: flex;
  flex-direction: row;
}
.vddl {
  flex: 1;
}
.lp {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fffc;
  z-index: 999999999;
  top: 0;
  left: 0;
}
.loa {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #10aeff;
}
.vfi {
  border-top: 1px dashed #ccc;
  width: 100%;
  padding: 0 10px;
  /* font-weight: bold; */
}
:deep(.van-field) {
  padding-left: 0;
  padding-right: 0;
}
:deep(.van-field__label) {
  width: 100px;
}
</style>
